<template>
  <basic-container>
    <el-tabs type="border-card" class="informationLabel">
      <el-tab-pane label="产品序列号替换">
        <el-row :gutter="20">
          <el-col :span="3"></el-col>
          <el-col :span="18">
            <avue-form class="newFormStyle" key="2" ref="repalceSnform" v-model="form" :option="snOption" @submit="handleSubmit">
              <template slot="btn">
                <div class="btn-group">
                  <el-button type="primary" size="small" @click="$refs.repalceSnform.submit()">替换</el-button>
                  <el-button size="small" class="icon-rest ml18" @click="$refs.repalceSnform.resetForm()">清空</el-button>
                </div>
              </template>
              <template slot="replaceProductSerialNo">
                <el-input placeholder="请输入新产品序列号" v-model="form.replaceProductSerialNo" ref="replaceProductSerialNo" @keyup.enter.native="handleSearchNewSn">
                </el-input>
              </template>
              <template slot="remark">
                <el-input type="textarea" :rows="3" placeholder="请输入原因说明" v-model="form.remark" ref="remark"> </el-input>
              </template>
            </avue-form>
          </el-col>
          <el-col :span="3"></el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </basic-container>
</template>

<script>
import { checkNewSn, checkOldSn, getSNInfo, replaceSn } from '@/api/product/replaceExceptionSn';

export default {
  name: 'replaceExceptionSn',
  data() {
    return {
      form: {},
      snOption: {
        labelWidth: 120,
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '旧产品序列号',
            prop: 'sequenceNumber',
            span: 12,
            rules: [
              {
                required: true,
                message: '请输入旧产品序列号',
                trigger: 'blur'
              }
            ],
            enter: (val) => {
              this.handleSearchOldSn(val);
            }
          },
          {
            label: '新产品序列号',
            prop: 'replaceProductSerialNo',
            span: 12,
            // enter: (val) => {
            //   this.handleSearchNewSn(val);
            // },
            rules: [
              {
                required: true,
                message: '请输入新产品序列号',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '工单号',
            prop: 'workOrderNo',
            span: 12,
            disabled: true
          },
          {
            label: '原因说明',
            prop: 'remark',
            type: 'textarea',
            minRows: 3,
            maxRows: 3,
            span: 12,
            formslot: true
          },
          {
            label: '产品名称',
            prop: 'partName',
            span: 12,
            disabled: true
          },
          {
            label: '',
            prop: 'btn',
            formslot: true,
            span: 12
          },
          {
            label: '产品型号',
            prop: 'partModel',
            span: 12,
            disabled: true,
            row: true
          },
          {
            label: '产品机型',
            prop: 'productModel',
            span: 12,
            disabled: true,
            row: true
          },
          {
            label: '工单批次',
            prop: 'lotNo',
            disabled: true,
            row: true
          },
          {
            label: '所在工序',
            prop: 'currRouteName',
            disabled: true,
            row: true
          }
        ]
      }
    };
  },
  methods: {
    async handleSubmit(row, done) {
      const { sequenceNumber, replaceProductSerialNo, remark = '' } = row;
      const data = { sequenceNumber, replaceProductSerialNo, remark };
      this.$confirm('产品序列号一旦替换，原来的标签就报废不可用了，后续采用新标签，是否确认进行替换变更', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const res = await replaceSn(data);
          this.$message.success(res.data.msg);
          this.$refs.repalceSnform.resetForm();
        } catch (e) {
          console.log(e);
        }
      });
      done();
    },
    async handleSearchOldSn(val) {
      try {
        const params = { sequenceNumber: val };
        const res = await checkOldSn(params);
        const msg = res.data.msg;
        const validateStatus = res.data.success;
        //'此产品序列号目前再维修状态，替换后新条码也需从维修地方进行作业，是否进行替换？'
        if (!validateStatus) {
          this.$confirm(msg, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(async () => {
              await this.getInfo(params);
              this.$refs.replaceProductSerialNo.focus();
            })
            .catch(() => {
              this.form.sequenceNumber = '';
            });
        } else {
          await this.getInfo(params);
          this.$refs.replaceProductSerialNo.focus();
        }
      } catch (e) {
        this.form.sequenceNumber = '';
        console.warn(e);
      }
    },
    async getInfo(params) {
      try {
        const res = await getSNInfo(params);
        this.form = res.data.data || {};
      } catch (e) {
        console.log(e);
      }
    },
    async handleSearchNewSn(event) {
      const { value = '' } = event.target;
      try {
        const data = {
          sequenceNumber: this.form.sequenceNumber,
          replaceProductSerialNo: this.form.replaceProductSerialNo
        };
        const res = await checkNewSn(data);
        this.$refs.remark.focus();
      } catch (e) {
        // 清空
        this.form.replaceProductSerialNo = '';
        console.warn(e);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.btn-group {
  display: flex;
  flex-direction: row-reverse;
  .ml18 {
    margin-right: 16px;
  }
}
.icon-rest {
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
</style>
